<script setup lang="tsx">
import { ref, inject } from 'vue';
import MyTable from '@/components/myTable/index.vue';
import QueryBox from '@/components/queryBox/index.vue';
import { formGroup } from '@/components/formDialog/FormDialog';
import FormDialogGroup from '@/components/formDialog/FormDialogGroup.vue';
import { Space, Link, MessagePlugin } from 'tdesign-vue-next';
import { SearchIcon } from 'tdesign-icons-vue-next';
import { getList, edit } from '@/api/member/positionApply';
const addDateRange = inject<typeof addDateRange>('addDateRange');
const data = ref([]);
const columns = [
  {
    title: '账号',
    colKey: 'userName',
  },
  {
    title: '职位',
    colKey: 'positionName',
  },
  {
    title: '申请日期',
    colKey: 'applyTime',
  },
  {
    title: '审核日期',
    colKey: 'updateTime',
  },
  {
    title: '状态',
    colKey: 'status',
    cell: (h: any, { row }: { row: any }) => {
      return (
        <Space>
          {row.status == '1' && (
            <t-tag theme="primary" variant="light">
              通过
            </t-tag>
          )}
          {row.status == '2' && (
            <t-tag theme="warning" variant="light">
              审核中
            </t-tag>
          )}
          {row.status == '3' && (
            <t-tag theme="danger" variant="light">
              未通过
            </t-tag>
          )}
        </Space>
      );
    },
  },
  {
    title: '操作',
    colKey: 'op',
  },
];

const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 10,
  total: 0,
});

interface FormDataType {
  userName: string | null;
  team: string | null;
  vname: string | null;
  pageNum: string | number | null;
  pageSize: string | number | null;
}
const INITIAL_QUERYFORM: FormDataType = {
  userName: undefined,
  team: undefined,
  vname: undefined,
  pageNum: null,
  pageSize: null,
};
const queryForm = ref({ ...INITIAL_QUERYFORM });

const dateRange = ref<string[]>([]);
const balanceRange = ref<[number | null, number | null]>([null, null]);
const render = () => (
  <>
    <QueryBox onReset={onReset} v-model:defaultCurrent={pagination.value.defaultCurrent} onSearch={unGetList}>
      <t-input v-model={queryForm.value.userName} placeholder="账号" style="width: 240px;">
        {{
          prefixIcon: () => <SearchIcon />,
        }}
      </t-input>
      <t-date-range-picker v-model={dateRange.value} placeholder="申请时间" />
    </QueryBox>
    <MyTable
      columns={columns}
      data={data.value}
      v-model:pagination={pagination.value}
      rowKey="id"
      onUnGetList={unGetList}
    >
      {{
        op: (slotProps: any) => (
          <Space>
            {slotProps.row.status == '2' && (
              <Link theme="primary" onClick={() => unEdit(slotProps)}>
                审核
              </Link>
            )}
          </Space>
        ),
      }}
    </MyTable>
  </>
);

const unGetList = async () => {
  try {
    queryForm.value.pageNum = pagination.value.defaultCurrent;
    queryForm.value.pageSize = pagination.value.defaultPageSize;
    const res = await getList({
      ...addDateRange?.(queryForm.value, dateRange.value),
    });
    data.value = res.rows;
    pagination.value = {
      ...pagination.value,
      total: res.total,
    };
  } catch (e) {
    console.log(e);
  }
};

unGetList();

const onReset = () => {
  queryForm.value = { ...INITIAL_QUERYFORM };
  balanceRange.value = [null, null];
  dateRange.value = [];
  unGetList();
};

// 详情
const formObj = new formGroup();
const unEdit = async (slotProps: any) => {
  try {
    formObj.show('职位审核', slotProps.row, '职位审核');
  } catch (e) {
    console.error(e);
    MessagePlugin.error(e);
  }
};

formObj.add<any>(
  '职位审核',
  '职位审核',
  {},
  async (body) => {
    await edit(body.data);
    unGetList();
  },
  {},
);
</script>

<template>
  <div>
    <render />
    <FormDialogGroup :form-obj="formObj">
      <template #default="{ formData, item }">
        <!-- 添加等级对话框 -->
        <template v-if="item == '职位审核'">
          <t-form-item label="账号" name="userName">
            <div>{{ formData.userName }}</div>
          </t-form-item>
          <t-form-item label="职位" name="positionName">
            <div>{{ formData.positionName }}</div>
          </t-form-item>
          <t-form-item label="处理结果" name="status">
            <t-radio-group v-model="formData.status">
              <t-radio value="1">通过</t-radio>
              <t-radio value="2">审核中</t-radio>
              <t-radio value="3">未通过</t-radio>
            </t-radio-group>
          </t-form-item>
        </template>
      </template>
    </FormDialogGroup>
  </div>
</template>
